<template>
  <view class="cu-modal bottom-modal" :class="{ show: visible }">
    <view class="mask" @click="close"></view>
    <view class="wrapper cu-dialog">
      <view>
        <view>
          <view class="title">
            商品详情
            <span style="color: #fec433" @click="gotoDetail()"
              >跳转<text class="cuIcon-right"></text
            ></span>
            <view class="close" @click="close">
              <text class="cuIcon-close"></text>
            </view>
          </view>
        </view>
        <scroll-view style="height: 700rpx" scroll-y>
          <view class="paddingX20 flex-column-align-center">
            <view v-if="item" class="color-white2 paddingB5 bold font5">{{
              item.name
            }}</view>
            <image
              v-for="(item, index) in picArray"
              :key="index"
              class="image marginY5"
              :src="item"
              mode="aspectFit"
            />
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
import resource from '@/utils/resource';
export default {
  data() {
    return {
      resource,
      visible: false,
      picArray: [],
      item: null,
    };
  },
  methods: {
    show(item) {
      this.visible = true;
      this.item = item;
      this.picArray = item.pic.split(',');
    },
    close() {
      this.visible = false;
      this.picArray = [];
      this.$emit('close');
    },
    gotoDetail(id) {
      if(this.item.spu){
        uni.navigateTo({
          url: '/subPackages/pages/product/index?spuId=' + this.item.spu.id,
        });
      }else{
        uni.navigateTo({
          url: '/subPackages/pages/product/index?spuId=' + this.item.id,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.wrapper {
  background: #fff;
  border-radius: 15px 15px 0px 0px !important;

  .title {
    text-align: center;
    font-size: 32rpx;
    font-family: Source Han Sans, Source Han Sans;
    font-weight: 700;
    color: #000000;
    padding: 44rpx 0 48rpx 0;
    position: relative;
  }

  .close {
    position: absolute;
    right: 0;
    width: 48rpx;
    height: 48rpx;
    background: #ebebeb;
    border-radius: 48rpx;
    color: #a2a2a2;
    top: 30rpx;
    line-height: 48rpx;
  }
}
</style>
